<template>
  <xtx-bread>
    <xtx-bread-item to="/">首页</xtx-bread-item>
    <xtx-bread-item :to="`/category/${activeItem.id}`">{{
      activeItem.name
    }}</xtx-bread-item>
    <transition name="fade-right" mode="out-in">
      <xtx-bread-item :key="activeItem.activeChild.id">{{ activeItem.activeChild.name }}</xtx-bread-item>
    </transition>
  </xtx-bread>
</template>

<script>
import { computed, ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "SubBread",
  setup() {
    // 当前激活项
    const STORE = useStore();
    const activeItem = computed(() => {
      return STORE.state.category.activeItem;
    });

    return {
      activeItem
    };
  }
};
</script>
